<template>
  <div class="page_home">
    <div class="page_nav">
      <!--<img src="http://oa.yswg.com.cn/group1/M00/00/10/rBJDQV_YEwSAaGeaAAA6kEWmSn0892.png" alt="" height="100px"/>-->
      <ul class="section_common">
        <!--<img src="http://oa.yswg.com.cn/group1/M00/00/10/rBJDQV_YEwSAaGeaAAA6kEWmSn0892.png" alt="" height="35px"/>-->
        <li :class="page_name == 'Personnel' ? 'active' : ''" @click="changeType('Personnel')">
          OA
        </li>
        <li :class="page_name == 'CheckInManagement' ? 'active' : ''" @click="changeType('CheckInManagement')">
          考勤管理
        </li>
        <!-- <li @click="goPage('MyMsg')">
          审批提交记录
        </li>
        <li @click="goPage('UserInfo')">
          个人中心
        </li>
        <li @click="goPage('SearchQuestion')">
          常见问题
        </li> -->
        <li :class="page_name == 'MyMsg' ? 'active' : ''" @click="changeType('MyMsg')">审批提交记录</li>
        <li :class="page_name == 'SearchQuestion' ? 'active' : ''" @click="changeType('SearchQuestion')">常见问题</li>
        <li :class="page_name == 'UserInfo' ? 'active' : ''" @click="changeType('UserInfo')">个人中心</li>
        <!-- <i class="el-icon-monitor"></i> -->
        <li><a href="http://oa.yswg.com.cn:8082" target="_blank">登入后台</a></li>

        <!-- <li :class="page_name == 'Recruitment' ? 'active' : ''" @click="changeType('Recruitment')">
          招聘管理
        </li>
        <li :class="page_name == 'Train' ? 'active' : ''" @click="changeType('Train')">
          学习模块
        </li>
        <li :class="page_name == 'Property' ? 'active' : ''" @click="changeType('Property')">
          资产管理
        </li>
        <li :class="page_name == 'Approval' ? 'active' : ''" @click="goPage('dayDataPage')">
          考勤管理
        </li> -->
      </ul>
    </div>
    <div class="page_nav_main" v-if="page_name == 'Personnel'">
      <div class="section_common">
        <div class="title">人事管理</div>

        <div class="type_item">
          <!--<div class="title">新建</div>-->
          <div class="main">
            <div class="item" @click="goPage('PersonnelPositive')">
              <img src="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2021/09/07/1630983392609.png" alt="" />
              <!--<span>转正申请</span>-->
            </div>
            <div class="item" @click="goPage('EntryRegistration')">
              <img src="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2021/09/07/1630996347065.png" alt="" />
              <!--<span>入职登记</span>-->
            </div>
            <div class="item" @click="goPage('PersonnelStaffRecord')">
              <img src="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2021/09/07/1630983392100.png" alt="" />
              <!--<span>员工档案</span>-->
            </div>
            <div class="item" @click="goPage('PersonnelMaintain')">
              <img src="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2021/09/07/1630983377913.png" alt="" />
              <!--<span>物资维修申请</span>-->
            </div>
            <div class="item" @click="goPage('PersonnelDormitory')">
              <img src="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2021/09/07/1630983387527.png" alt="" />
              <!--<span>宿舍登记</span>-->
            </div>
            <div class="item" @click="goPage('PersonnelCost')">
              <img src="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2021/09/07/1630983373773.png" alt="" />
              <!--<span>费用登记</span>-->
            </div>
          </div>
        </div>
      </div>
      <div class="section_common">
        <div class="title">招聘管理</div>
        <div class="type_item">
          <!--<div class="title">新建</div>-->
          <div class="main">
            <div class="item" @click="goPage('RecruitmentInternalRecommend')">
              <img src="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2021/09/07/1630983970972.png" alt="" />
              <!--<span>我要内推</span>-->
            </div>
            <div class="item" @click="goPage('RecruitmentNeeds')">
              <img src="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2021/09/07/1630983972233.png" alt="" />
              <!--<span>招聘需求申请</span>-->
            </div>
            <!--<div class="item" @click="goPage('RecruitmentInterview')">
                            <img
                                    src="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2021/04/14/1618395411788.png"
                                    alt=""
                            />
                            <span>面试登记</span>
                        </div>
                        <div class="item" @click="goPage('RecruitmentEntry')">
                            <img
                                    src="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2021/04/14/1618395429960.png"
                                    alt=""
                            />
                            <span>入职审批</span>
                        </div>
-->
            <div style="padding-bottom: 100px"></div>
            <div class="item" @click="goPage('PositionApply')">
              <img src="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2021/09/07/1630996344797.png" alt="" />
              <!--<span>岗位申请</span>-->
            </div>
            <br>
            <div class="item" @click="goPage('ExecutionPage')">
              <img src="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2021/09/07/1630996355313.png" alt="" />
              <!--<span>招聘进度</span>-->
            </div>

          </div>
        </div>
        <div class="type_item">
          <!--<div class="title">仓库-新建</div>-->
          <div class="main">
            <div class="item" @click="goPage('RecruitmentBackground')">
              <img src="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2021/09/07/1630983975305.png" alt="" />
              <!--<span>员工背景登记</span>-->
            </div>
          </div>
        </div>
      </div>
      <div class="section_common">
        <div class="title">学习模块</div>
        <div class="type_item">
          <!--<div class="title">学习模块</div>-->
          <div class="main">
            <div class="item" @click="goPage('TrainStudyIndex')">
              <img src="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2021/09/08/1631065276449.png" alt="" />
              <!--<span>必学课程</span>-->
            </div>
            <div class="item" @click="goPage('TrainAssigned')">
              <img src="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2021/09/07/1630996717489.png" alt="" />
              <!--<span>进阶培训</span>-->
            </div>
            <div class="item" @click="goPage('TrainStudyUserPage')">
              <img src="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2021/09/08/1631065284509.png" alt="" />
              <!--<span>我的评论与回复</span>-->
            </div>
            <div class="item" @click="goPage('TrainStudyNeeds')">
              <img src="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2021/09/16/1631784312932.png" alt="" />
              <!--<span>学习需求申请</span>-->
            </div>
            <div class="item" @click="goPage('TrainStudyTeacher')">
              <img src="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2021/09/16/1631784327678.png" alt="" />
              <!--<span>培训师申请</span>-->
            </div>
            <div class="item" @click="goPage('TrainStudyPlan')">
              <img src="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2021/09/16/1631784325927.png" alt="" />
              <!--<span>培训计划安排</span>-->
            </div>
          </div>
        </div>
      </div>
      <div class="section_common">
        <div class="title">资产管理</div>
        <div class="type_item">
          <!--<div class="title">新建</div>-->
          <div class="main">
            <div class="item" @click="goPage('PropertyArticleApply')">
              <img src="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2021/09/07/1630996867254.png" alt="" />
              <!--<span>物品领用申请</span>-->
            </div>
            <div class="item" @click="goPage('PropertyArticlePurchase')">
              <img src="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2021/09/07/1630996863574.png" alt="" />
              <!--<span>物品采购申请</span>-->
            </div>
            <div class="item" @click="goPage('PropertyArticleScrap')">
              <img src="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2021/09/07/1630996854898.png" alt="" />
              <!--<span>物品报废登记</span>-->
            </div>
            <div class="item" @click="goPage('PropertyAssetRegister')">
              <img src="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2021/09/07/1630996867242.png" alt="" />
              <!--<span>资产登记</span>-->
            </div>
            <div class="item" @click="goPage('PropertyArticleApplyCk')">
              <img src="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2021/09/07/1630996860678.png" alt="" />
              <!--<span>物品领用申请-仓库</span>-->
            </div>
            <div class="item" @click="goPage('PropertyArticleScrapCk')">
              <img src="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2021/09/07/1630996862067.png" alt="" />
              <!--<span>物品报废申请</span>-->
            </div>
            <div class="item" @click="goPage('PhotographItemApply')">
              <img src="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2021/09/07/1630996717308.png" alt="" />
              <!--<span>器材申领</span>-->
            </div>
            <div class="item" @click="goPage('PhotographItemPurchase')">
              <img src="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2021/09/07/1630996729765.png" alt="" />
              <!--<span>器材采购</span>-->
            </div>
            <div class="item" @click="goPage('PhotographItemScrap')">
              <img src="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2021/09/07/1630996736091.png" alt="" />
              <!--<span>物品报废登记</span>-->
            </div>
          </div>
        </div>
      </div>

    </div>
    <!-- 考勤模块 -->
    <div class="page_nav_main" v-if="page_name == 'CheckInManagement'">
      <div class="section_common">
        <div class="type_item">
          <div class="main">
            <div class="item" @click="goPage('dayDataPage')">
              <img src="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2021/10/13/1634094914846.png" alt="" />
              <!--<span>加班日报</span>-->
            </div>
            <div class="item" @click="goPage('personMonthlyAttendance')">
              <img src="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2021/10/13/1634095638428.png" alt="" />
              <!--<span>个人月度考勤</span>-->
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="page_nav_main_msg" v-if="page_name == 'MyMsg'">
      <myMsg/>
    </div>
    <div class="page_nav_main" v-if="page_name == 'UserInfo'">
      <userInfo/>
    </div>
    <div class="page_nav_main" v-if="page_name == 'SearchQuestion'">
      <searchQuestion/>
    </div>

<!--@click="gotoManagePlatform()"-->
    <!-- <div class="gotoManagePlatform">
      <a href="http://oa.yswg.com.cn:8082" target="_blank"><i class="el-icon-monitor"></i></a>
    </div> -->
    <!-- <div class="my_msg" @click="goPage('MyMsg')">
      <van-icon name="chat-o" size="20" />
    </div> -->
    <!--<div class="my_approve" @click="goPage('UserApprove')">
            <span>我审批的</span>
        </div>
        <div class="my_submit" @click="goPage('UserSubmit')">
            <span>已提交的</span>
        </div>-->
    <!-- <div class="my_search" @click="goPage('SearchQuestion')">
      <i class="el-icon-search" style="font-size: 20px; color: #a365b3"></i>
    </div> -->
    <!-- <div class="my_avator" @click="goPage('UserInfo')">
      <el-avatar style="background-color: floralwhite;width: 26px;height: 26px;"
        src="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2021/09/08/1631065619042.png"></el-avatar>
    </div> -->
    <!--<div class="tsinfo">
            <p>工号：{{this.user.jobNumId}}</p>
            <p>姓名：{{this.user.name}}</p>
            <p>时间：{{this.date}}</p>
            <p>截止本月1号剩余调休天数：{{this.user.remainday}}</p>
            <p>(点击刷新后若以上基础信息不正确，可打开如下链接进行缓存清理)</p>
            附件：<a target="_blank" href="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2021/04/09/1617956151475.pdf">企业微信缓存清理文档.pdf</a>
        </div>-->
  </div>
</template>

<script>
import Vue from "vue";
import { Icon } from "vant";
import  myMsg  from "@/views/my/myMsg.vue";
import userInfo  from "@/views/my/userInfo.vue";
import  searchQuestion  from "@/views/my/searchQuestion.vue";
Vue.use(Icon);
export default {
  data() {
    return {
      page_name: "Personnel",
      user: [],
      date: "",
    };
  },
  components: {
    myMsg,
    userInfo,
    searchQuestion,
  },
  created() {
    this.user = JSON.parse(localStorage.getItem("userInfo"));
    var time = new Date(JSON.parse(localStorage.getItem("time")));
    this.date =
      time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDate();
    /* Dialog({ message: '工号：'+user.jobNumId+'\n姓名：'+ user.name +
                     "\n时间："+date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate()
                     +'\n(如果以上基础信息不正确，可打开如下链接步骤进行缓存清理)'
                     +'\nhttp://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2021/04/09/1617956151475.pdf'});*/
  },
  methods: {
    //去相关页面
    goPage(name) {
      this.$router.push({
        name,
        params: { type: "Home" },
      });
    },
    gotoManagePlatform() {
      window.location.href = "http://oa.yswg.com.cn:8082";
    },

    // 改变页面顶部的类型
    changeType(name) {
      console.log(name);
      if (this.page_name == name) return;
      this.page_name = name;
    },
  },
};
</script>

<style lang="scss" scoped>
.tsinfo {
  /*float: right;*/
  width: 250px;
  border: 1px solid #000000;
  border-radius: 10px;
  background: white;
  position: absolute;
  right: 20px;
  bottom: 40px;
}
.page_home {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: auto;

  .my_avator {
    cursor: pointer;
    position: absolute;
    right: 115px;
    top: 47px;
    font-size: 8px;
    padding: 4px 10px;
    /*background: white;*/
    background-color: white;
  }

  .my_msg {
    cursor: pointer;
    position: absolute;
    right: 80px;
    top: 50px;
    font-size: 14px;
    padding: 4px 10px;
    background-color: white;
    color: darkred;
    border-radius: 10px;
  }

  .my_search {
    cursor: pointer;
    position: absolute;
    right: 45px;
    top: 50px;
    font-size: 14px;
    padding: 4px 10px;
    border-radius: 10px;
  }

  .gotoManagePlatform {
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 50px;
    font-size: 20px;
    padding: 4px 10px;
    background-color: white;
    color: blue;
    border-radius: 10px;
  }

  .my_submit {
    cursor: pointer;
    position: absolute;
    right: 90px;
    top: 50px;
    font-size: 14px;
    padding: 4px 10px;
    background-color: #3285ff;
    color: white;
    border-radius: 10px;
  }

  .my_approve {
    cursor: pointer;
    position: absolute;
    right: 180px;
    top: 50px;
    font-size: 14px;
    padding: 4px 10px;
    background-color: yellowgreen;
    color: white;
    border-radius: 10px;
  }
}

.page_nav {
  position: fixed;
  top: 0;
  
  z-index: 99;
  width: 100%;
  background-color: #ddd;

  ul {
    height: 44px;
    width: 650px;
    display: flex;
    flex-flow: row nowrap;
    // align-items: center;
    
    li {
      height: 100%;
      display: flex;
      cursor: pointer;
      // flex: 1;
      position: relative;
      justify-content: center;
      align-items: center;
      // margin-right: 30px;
      margin: 0 22px;
     
      &.active {
        color: #3285ff;

        &::after {
          content: "";
          width: 70px;
          height: 3px;
          background-color: #3285ff;
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
        }
      }
      a{
        color: #2c3e50;
      }
    }
  }
}
.page_nav_main_msg{
  margin-top: 55px;
  // overflow: auto;
}
.page_nav_main {
  width: 100%;
  padding: 20px;
  margin-top: 44px;
  // overflow: auto;


  .section_common {
    width: 650px;
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    margin-bottom: 20px;
    // padding: 0 10px;
    .title {
      padding-left: 10px;
      margin-bottom: 10px;
    }
    .type_item {
      width: 100%;
      display: flex;
      flex-flow: column nowrap;
      margin-left: 0%;

      //   .title {
      //     width: 100%;
      //     padding: 2px;
      //     font-size: 12px;
      //     color: #999;
      //     margin-bottom: 2px;
      //   }

      .main {
        width: 550px;
        // margin: 0 auto;
        display: flex;
        flex-flow: row wrap;
        .item {
          display: flex;
          flex-flow: column nowrap;
          align-items: center;
          font-size: 12px;
          margin-right: 10px;
          margin-bottom: 10px;
          img {
            max-width: 120px;
            cursor: pointer;
          }

          span {
            text-align: center;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
